<template>
  <div class="softClass">
    <Transfer
      :data="selectList"
      :target-keys="newSelected"
      :render-format="render"
      filterable
      @on-change="handleChange"
      :titles="[$t('字段表'), $t('已选字段')]"
    ></Transfer>
  </div>
</template>
  <script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    selectList: {
      type: Array,
      default() {
        return []
      }
    },
    selected: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      actions: [
        {
          text: this.$t('common.save'),
          theme: 'primary',
          handle: () => {
            this.save()
          }
        },
        // {
        //   text: this.$t('common.close'),
        //   handle: () => {
        //     this.$emit('Close')
        //   }
        // }
      ],
      newSelected: this.selected
    }
  },
  computed: {},
  created() {
    this.init()
  },
  methods: {
    init() {
      this.$emit('SetTitle', this.title)
      this.$emit('SetPageWidth', 800)
      this.$emit('SetPageActions', this.actions)
    },
    handleChange(newTargetKeys) {
      this.newSelected = newTargetKeys
    },
    render(item) {
      return item.label
    },
    save() {
      this.$emit('Close', this.newSelected)
    }
  },
  watch: {},
  directives: {}
}
</script>
  <style lang="less" scoped>
.softClass {
  display: flex;
  justify-content: center;
}
/deep/.ivu-transfer-list-body {
  border-radius: 0;
}
/deep/.ivu-transfer-list-header {
  border-radius: 0;
}
/deep/.ivu-transfer-list {
  width: 290px;
  height: 410px;
}
</style>